<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            var btn = document.getElementById("btn");
            var box = document.getElementById("box");
            btn.onclick = function () {
                /*
                    通过style属性来修改元素样式，每修改一个样式，浏览器就需要重新渲染一次页面
                */
                // box.style.width="200px";
                // box.style.height="200px";
                //用一行代码，同时修改多个样式
                /*
                    可以修改元素的class属性来间接修改样式
                    className+=“ b2”;
                */
                // addClass(box, "b2");
                // removeClass(box,"b1");
                toggleClass(box,"b2");
            };
            //定义一个函数，用来向一个元素中添加指定的class属性值
            /*
                参数
                    obj 添加class属性的元素
                    cn  添加的class值
            */
            function addClass(obj, cn) {
                //检查是否含有cn
                if (!hasClass(obj, cn)) {
                    obj.className += " " + cn;
                }
            }
            /*
                 判断是否有class值
                     如果有返回 true 否则返回 false
            */
            function hasClass(obj, cn) {
                //创建正则表达式
                // var reg=/\bb2\b/;
                var reg = new RegExp("\\b" + cn + "\\b");
                return reg.test(obj.className);
            }
            /*
                删除一个元素中指定的class
            */
            function removeClass(obj, cn) {
                var reg = new RegExp("\\b" + cn + "\\b");
                obj.className =obj.className.replace(reg,"");
            }
            /*
                元素中具有该类，则删除
                元素中没有该类，则添加
            */
            function toggleClass(obj,cn){
                if(hasClass(obj,cn)){
                    removeClass(obj,cn);
                }else{
                    addClass(obj,cn);
                }
            }
        };

    </script>
    <style>
        .b1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .b2 {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <button id="btn">点击后修改box1的样式</button>
    <br />
    <br />
    <div id="box" class="b1"></div>
</body>

</html>